import React, { Component } from 'react'
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import News from '../News'
import MyTabBar from '../../components/TabBar'
import { Space, Swiper, Grid } from 'antd-mobile'
import { $http } from '../../utils/service'

import Navigation from './Navigation'
import GroupsCard from '../../components/GroupsCard/index'
import TitleCard from '../../components/TitleCard/index'
import LatestInformationList from "../../components/LatestInformationList"
import url from "../../config/url.config"

import "./style.scss"
import "../../assets/iconfont/index.css"

class Home extends Component {
    constructor(props) {
        super(props)
    }
    state = {
        swiperList: [],
        groupsList: [],
        latestInformationList: []
    }

    // 获取轮播图数据
    getSwiper() {
        $http.get('/home/swiper').then(res => {
            this.setState({
                swiperList: res.body
            })
        })
    }

    // 获取租房小组数据
    getGroups() {
        $http.get('/home/groups?area=AREA%7C88cff55c-aaa4-e2e0').then(res => {
            this.setState({
                groupsList: res.body
            })
        })
    }

    // 获取最新资讯数据
    getLatestInformtionList() {
        $http.get('/home/news?area=AREA%7C88cff55c-aaa4-e2e0').then(res => {
            console.log(res);
            this.setState({
                latestInformationList: res.body
            })
        })
    }

    //组件挂载时触发
    componentWillMount() {
        this.getSwiper()
        this.getGroups()
        this.getLatestInformtionList()
    }

    //组件完成挂载触发
    componentDidMount() {
    }

    //组件将要更新数据时触发
    componentWillUpdate() {

    }

    //组件更新数据完成时触发
    componentDidUpdate() {

    }

    //组件销毁时触发
    componentWillUnmount() {

    }



    render() {
        return (
            <div className="home">
                {/* 轮播图区域 */}
                <div className="swiper">

                    <div className="top_search">
                        <div className="left">
                            <div className="city_list">
                                <span>上海</span>
                                <i className="iconfont">&#xe665;</i>
                            </div>
                            <div className="input">
                                <i className="iconfont">&#xe60b;</i>
                                <span className="search_input" >请输入小区或地址</span>
                            </div>
                        </div>

                        <div className="map">
                            <div>
                                <i className="iconfont">&#xe620;</i>
                            </div>
                        </div>
                    </div>
                    <Space direction='vertical' block>
                        <Swiper
                            autoplay
                            indicatorProps={{
                                color: 'white',
                            }}
                            defaultIndex={1}
                            style={{
                                "--height": "30%"
                            }}
                        >
                            {
                                this.state.swiperList.map(item => {
                                    return <Swiper.Item key={item.id}>
                                        <img className="swiper_img" src={`${url}${item.imgSrc}`} alt={item.alt} />
                                    </Swiper.Item>
                                })
                            }
                        </Swiper>
                    </Space>
                </div>


                {/* 导航区域 */}
                <Navigation></Navigation>

                {/* 租房小组 */}
                <TitleCard title={'租房小组'}>更多</TitleCard>

                <Grid columns={2} gap={8}>
                    {
                        this.state.groupsList.map(item => {
                            return (
                                <Grid.Item key={item.id} span={1} >
                                    <GroupsCard className="groups_card" key={item.id} {...item}></GroupsCard>
                                </Grid.Item>
                            )
                        })
                    }
                </Grid>

                {/* 最新资讯 */}
                <div className="zuixinzixun">
                    <p>最新资讯</p>
                    {
                        this.state.latestInformationList.map(item => {
                            return <LatestInformationList key={item.id} {...item}></LatestInformationList>
                        })
                    }
                </div>


            </div>
        )
    }
}
export default Home